<template>
  <div>这是登录页</div>
  <input type="text" v-model="value" />
  <button @click="search">搜索</button>
  <ul>
    <li v-for="item in list" :key="item.id">
      {{ item.name }} - {{ item.huodongLeixing }} -
      <button @click="remove(item.id)">删除</button>
    </li>
  </ul>
  <el-pagination
    layout="prev, pager, next"
    :total="total"
    @current-change="fn"
  />
</template>

<!-- <script setup>
import Mock from "mockjs";

// 定义数据类型
var data = Mock.mock({
  // 20条数据
  "data|20": [
    {
      // 商品种类
      goodsClass: "女装",
      // 商品Id
      "goodsId|+1": 1,
      name: "@cname(3)",
      //商品名称
      goodsName: "@ctitle(3)",
      //商品地址
      goodsAddress: "@county(true)",
      //商品等级评价★
      "goodsStar|1-5": "★",
      //商品图片
      goodsImg: "@Image('100x100','@color','小甜甜')",
      //商品售价
      "goodsSale|30-500": 30,
    },
  ],
});
// 输出结果随机生成的数据（node index.js）
console.log(data);
</script> -->

<script setup>
import { onMounted, ref, watch } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import { indexApi } from "@/api/api";

import "../../mock/index.js";

const list = ref([]);
const total = ref(0);
const currentPage = ref(1);

const value = ref("");

const getData = async () => {
  const res = await indexApi({
    currentPage: currentPage.value,
    pageSize: 10,
    value: value.value,
  });
  list.value = res.data.result;
  total.value = res.data.total;
};

onMounted(() => {
  getData();
});

const fn = (num) => {
  currentPage.value = num;
};

const search = () => {
  getData();
};

watch(currentPage, () => {
  getData();
});

const remove = (id) => {
  axios.post("/api/remove", { id: id }).then((res) => {
    ElMessage({
      message: res.data.msg,
      type: "success",
    });
    getData();
  });
};

const state = reactive({
  name: "",
  huodongName: "",
  huodongLeixing: "",
});

const add = () => {
  axios.post("/api/add", { state: state }).then((res) => {});
};
</script>
